/* Поиск по онлайн-школе - финальная версия для GetCourse (с SVG иконками) */
(function() {
'use strict';
let debounceTimer = null;
// Конфигурация
const CONFIG = {
minSearchLength: 2,
debounceDelay: 300,
searchUrl: '/pl/search/search-lesson'
};
// SVG иконки для разных типов контента
const SVG_ICONS = {
course: ``,
lesson: ``,
training: ``,
test: ``,
webinar: ``,
default: ``
};
// Цвета фона для разных типов
const CATEGORY_COLORS = {
1: '#7CB291', // Курсы
2: '#7CB291', // Уроки
3: '#7CB291', // Тренинги
4: '#7CB291', // Тесты
5: '#7CB291' // Вебинары
};
// Получение SVG иконки по категории
function getCategoryIcon(category) {
switch(category) {
case 1: return SVG_ICONS.course;
case 2: return SVG_ICONS.lesson;
case 3: return SVG_ICONS.training;
case 4: return SVG_ICONS.test;
case 5: return SVG_ICONS.webinar;
default: return SVG_ICONS.default;
}
}
// Получение цвета по категории
function getCategoryColor(category) {
return CATEGORY_COLORS[category] || '#F68B2D';
}
// Основная функция поиска
async function performSearch() {
const searchInput = document.querySelector('.custom-search__input');
if (!searchInput) return;
const searchValue = searchInput.value.trim();
if (searchValue.length < CONFIG.minSearchLength) {
clearResults();
return;
}
showLoading(searchInput);
try {
const url = `${CONFIG.searchUrl}?q=${encodeURIComponent(searchValue)}&ccc=${Date.now()}`;
console.log(`🔍 Поиск: "${searchValue}"`);
const response = await fetch(url, {
method: 'GET',
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'application/json'
}
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();
console.log('Получены данные:', data);
hideLoading();
if (data.results && data.results.length > 0) {
displayResults(data.results, searchInput, searchValue);
} else {
showNoResults(searchInput, searchValue);
}
} catch (error) {
console.error('Ошибка поиска:', error);
hideLoading();
showError(searchInput, 'Ошибка поиска. Попробуйте позже.');
}
}
// Отображение результатов
function displayResults(results, searchInput, query) {
clearResults();
const resWrap = document.createElement('div');
resWrap.classList.add('custom-search__search-results-wrap');
const resultsContainer = document.createElement('div');
resultsContainer.classList.add('custom-search__search-results');
resWrap.appendChild(resultsContainer);
results.forEach((item) => {
const resultItem = createResultItem(item);
resultsContainer.appendChild(resultItem);
});
const resultsInfo = document.createElement('div');
resultsInfo.classList.add('custom-search__results-info');
resultsInfo.style.padding = '8px 12px';
resultsInfo.style.backgroundColor = '#f8f9fa';
resultsInfo.style.borderTop = '1px solid #e9ecef';
resultsInfo.style.fontSize = '12px';
resultsInfo.style.color = '#6c757d';
resultsInfo.innerHTML = `Найдено ${results.length} результат${getDeclension(results.length)}`;
resultsContainer.appendChild(resultsInfo);
searchInput.parentElement.appendChild(resWrap);
console.log(`Отображены все ${results.length} результатов`);
}
function getDeclension(count) {
if (count % 10 === 1 && count % 100 !== 11) return '';
if (count % 10 >= 2 && count % 10 <= 4 && (count % 100 < 10 || count % 100 >= 20)) return 'а';
return 'ов';
}
// Создание элемента результата с SVG иконкой
function createResultItem(item) {
const link = document.createElement('a');
link.classList.add('custom-search__search-item');
let url = '#';
if (item.url) {
url = item.url;
} else if (item.onClick && item.onClick.url) {
url = item.onClick.url;
} else if (item.objectId) {
url = `/teach/control/stream/view/id/${item.objectId}`;
}
link.href = url;
const titleContainer = document.createElement('div');
titleContainer.classList.add('custom-search__item-title-container');
titleContainer.style.display = 'flex';
titleContainer.style.alignItems = 'center';
titleContainer.style.gap = '12px';
// Контейнер для SVG иконки
const iconContainer = document.createElement('div');
iconContainer.style.width = '40px';
iconContainer.style.height = '40px';
iconContainer.style.borderRadius = '12px';
iconContainer.style.display = 'flex';
iconContainer.style.alignItems = 'center';
iconContainer.style.justifyContent = 'center';
iconContainer.style.flexShrink = '0';
iconContainer.style.backgroundColor = getCategoryColor(item.category);
// Вставляем SVG иконку
const svgIcon = getCategoryIcon(item.category);
iconContainer.innerHTML = svgIcon;
// Стилизуем SVG
const svgElement = iconContainer.querySelector('svg');
if (svgElement) {
svgElement.style.width = '20px';
svgElement.style.height = '20px';
}
titleContainer.appendChild(iconContainer);
// Контейнер для текста
const textContainer = document.createElement('div');
textContainer.style.flex = '1';
// Название
const titleSpan = document.createElement('div');
titleSpan.classList.add('custom-search__item-title');
titleSpan.style.fontWeight = '500';
titleSpan.style.color = '#333';
titleSpan.style.fontSize = '16px';
titleSpan.style.marginBottom = '4px';
titleSpan.innerText = item.title || 'Без названия';
textContainer.appendChild(titleSpan);
// Тип контента
if (item.filterType || item.type) {
const typeSpan = document.createElement('div');
typeSpan.classList.add('custom-search__item-type');
typeSpan.style.fontSize = '12px';
typeSpan.style.color = '#999';
typeSpan.innerHTML = item.filterType || item.type;
textContainer.appendChild(typeSpan);
}
titleContainer.appendChild(textContainer);
link.appendChild(titleContainer);
// Описание
let description = '';
if (item.description) {
description = item.description;
} else if (item.shortDescription) {
description = item.shortDescription;
} else if (item.text) {
description = item.text;
}
if (description) {
const descrDiv = document.createElement('div');
descrDiv.classList.add('custom-search__search-item-descr');
descrDiv.style.marginTop = '8px';
descrDiv.style.marginLeft = '-10px';
descrDiv.style.fontSize = '13px';
descrDiv.style.color = '#666';
descrDiv.style.lineHeight = '1.4';
descrDiv.innerText = description.length > 120 ?
description.substring(0, 120) + '...' :
description;
link.appendChild(descrDiv);
}
// Стили для ссылки
link.style.display = 'block';
link.style.padding = '12px';
link.style.borderBottom = '1px solid #eee';
link.style.textDecoration = 'none';
link.style.transition = 'all 0.2s';
link.addEventListener('mouseenter', () => {
link.style.backgroundColor = '#f8f9fa';
link.style.transform = 'translateX(4px)';
});
link.addEventListener('mouseleave', () => {
link.style.backgroundColor = 'transparent';
link.style.transform = 'translateX(0)';
});
return link;
}
function clearResults() {
const results = document.querySelectorAll('.custom-search__search-results-wrap');
results.forEach(item => item.remove());
}
function showLoading(searchInput) {
hideLoading();
const loader = document.createElement('div');
loader.classList.add('custom-search__loader');
loader.style.position = 'absolute';
loader.style.top = '100%';
loader.style.left = '0';
loader.style.right = '0';
loader.style.backgroundColor = 'white';
loader.style.borderRadius = '8px';
loader.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
loader.style.zIndex = '1000';
loader.style.marginTop = '5px';
loader.innerHTML = `
Поиск...
`;
searchInput.parentElement.style.position = 'relative';
searchInput.parentElement.appendChild(loader);
}
function hideLoading() {
const loader = document.querySelector('.custom-search__loader');
if (loader) loader.remove();
}
function showError(searchInput, message) {
const errorDiv = document.createElement('div');
errorDiv.classList.add('custom-search__error');
errorDiv.style.position = 'absolute';
errorDiv.style.top = '100%';
errorDiv.style.left = '0';
errorDiv.style.right = '0';
errorDiv.style.backgroundColor = '#f8d7da';
errorDiv.style.border = '1px solid #f5c6cb';
errorDiv.style.padding = '10px';
errorDiv.style.marginTop = '5px';
errorDiv.style.borderRadius = '4px';
errorDiv.style.color = '#721c24';
errorDiv.style.fontSize = '13px';
errorDiv.style.zIndex = '1000';
errorDiv.innerHTML = `❌ ${message}`;
searchInput.parentElement.style.position = 'relative';
searchInput.parentElement.appendChild(errorDiv);
setTimeout(() => errorDiv.remove(), 4000);
}
function showNoResults(searchInput, query) {
const noResults = document.createElement('div');
noResults.classList.add('custom-search__no-results');
noResults.style.position = 'absolute';
noResults.style.top = '100%';
noResults.style.left = '0';
noResults.style.right = '0';
noResults.style.backgroundColor = 'white';
noResults.style.borderRadius = '8px';
noResults.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
noResults.style.padding = '20px';
noResults.style.marginTop = '5px';
noResults.style.textAlign = 'center';
noResults.style.color = '#6c757d';
noResults.style.zIndex = '1000';
noResults.innerHTML = `😕 По запросу "${query}" ничего не найдено`;
searchInput.parentElement.style.position = 'relative';
searchInput.parentElement.appendChild(noResults);
setTimeout(() => noResults.remove(), 3000);
}
function debouncedSearch() {
if (debounceTimer) clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => performSearch(), CONFIG.debounceDelay);
}
document.addEventListener('click', (event) => {
if (!event.target.closest('.custom-search') &&
!event.target.closest('.custom-search__input') &&
!event.target.closest('.search_btn')) {
clearResults();
}
});
function init() {
const searchBtn = document.querySelector('.search_btn');
const searchInput = document.querySelector('.custom-search__input');
if (searchBtn) {
searchBtn.addEventListener('click', (e) => {
e.preventDefault();
performSearch();
});
}
if (searchInput) {
searchInput.addEventListener('input', () => {
const value = searchInput.value.trim();
if (value.length >= CONFIG.minSearchLength) {
debouncedSearch();
} else if (value.length === 0) {
clearResults();
}
});
searchInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
event.preventDefault();
if (debounceTimer) clearTimeout(debounceTimer);
performSearch();
}
});
}
console.log('✅ Поиск инициализирован (с SVG иконками)');
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();